<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <@cms_site id=siteId!'' >
		<@cms_channel id=businessId!'' >
			<meta name="keywords" content="${(site.keywords)!''},${(tag_bean.name)!''}" />
			<title>${(tag_bean.name)!''}</title>
		</@cms_channel>
		</@cms_site>
	    <link rel="stylesheet" href="${ctx}/css/wechat/phone.css" />
	    <link rel="stylesheet" href="${ctx}/css/wechat/style.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/jquery-weui.min.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/weui.min.css" />
	    <script type="text/javascript" src="${ctx}/js/wechat/jQuery.1.8.2.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/wechat/height.js" ></script>
	    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/jquery-weui.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/city-picker.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/jquery/jquery.form.js" ></script>
	    <style>
	    	body{
	    		background: url(${ctx}/img/wechat/jyxc_bgimg.jpg);
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    	.linear-gradients{
	    		background-image: -webkit-gradient(linear,100% 100%, 100% 0%, from(#42C2FF), to(#15A9FE), color-stop(0.5,#2CB6FE));
	    	}
	    	.l-r-w-h{width: 10px;height: 10px;top: -9px;left: -6px;}
	    	ul li{margin-bottom: 9px;}
	    	.boxShadow{-moz-box-shadow:0px 0px 10px #ABABAB; -webkit-box-shadow:0px 0px 10px #ABABAB; box-shadow:0px 0px 10px #ABABAB;}
	    </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col12 l-ht0">
					<img src="${ctx}/img/wechat/jzxx_banner.jpg" class="per100" />
				</div>
			</div>
			<form id="submitForm" action="${ctx}/f/mp/${(siteId)!''}/${(businessId)!''}/comment/update" method="post">
				<div class="row base">
					<div class="col12">
						<div class="ht38 mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>姓名
							</div>
							<div class="ht38 fl per60 border-b-f4f4f5 pos-r">
								<input type="text" name="userName" id="informName" class="border-none font-6 ht18 font14" placeholder="请填写您的姓名" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
						</div>
						<div class="overflow-h">
							<div class="ht56 pt18 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>性别
							</div>
							<div class="ht56 pt18 fl per60 pos-r">
								<input type="text"  id="informSex" value="男" class="border-none font-6 ht18 font14" placeholder="请选择您的性别" />
								<input type="hidden" name="type" id="sexHidden" value="男" class="border-none font-6 ht18 font14" placeholder="请选择您的性别" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top22 right26 display-n" />
							</div>
							<div class="fr per60 border-b-f4f4f5 pb10 mt14 jblx">
								<ul id="typeList">
									<li class="ht24">
										<div class="ht24 border-l-1 pos-r">
											<div class="radius-circle border-ed455e pos-a l-r-w-h"></div>
											<div class="font-ed455e font12 pos-a per100 pl10 ht24 left0 -top12 text-ellipsis1">
												<span data="1">男</span>
											</div>
										</div>
									</li>
									<li class="ht24">
										<div class="ht24 border-l-1 pos-r">
											<div class="radius-circle pos-a border l-r-w-h"></div>
											<div class="pos-a per100 font12 pl10 ht24 left0 -top12 font-9 text-ellipsis1">
												<span data="2">女</span>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="ht56">
							<div class="ht56 pt18 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>手机号码
							</div>
							<div class="ht56 pt18 fl per60 border-b-f4f4f5 pos-r">
								<input type="text" name="mobile" id="informNum" class="border-none font-6 ht18 font14" placeholder="请填写您的手机号码" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top22 right26 display-n" />
							</div>
						</div>
					</div>
				</div>
				<div class="row suggest display-n">
					<div class="col12">
						<div class="ht38 mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>信件内容
							</div>
							<div class="ht38 fl per60 border-b-f4f4f5 font-9 font14 pos-r">
								<span class="msgCont">请在下方编写您的信件内容</span>
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
						</div>
						<div class="pl28 pr28 overflow-h mt24 pos-r">
							<div class="ht12 font-9 pos-a left30 top4 font14 l-ht12 tipMsg">
								请在这里输入内容，限<span class="font-red">200</span>字
							</div>
							<textarea id="informCont" name="content" class="border-none ht160 l-ht20 font14 border-b-f4f4f5 font-6 per100" style="resize: none;"></textarea>
						</div>
					</div>
				</div>
			</form>
			<div class="row">
				<div class="col12 ht26 pl44 pr44 mt36 mb30">
					<div class="ht26 l-ht26 tc font-white per100 radius4 font-yahei btn linear-gradients font12 next">下一步</div>
				</div>
				<div class="col12 ht26 pl44 pr44 per100 submit display-n">
					<div class="overflow-h ht26 linear-gradients radius4">
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn upstep font12">上一步</div>
						<div class="ht26 l-ht26 tc per5 fl font12 font-9">|</div>
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn font12" onclick="submitForm();">提交</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="ht44 w-44 radius-circle l-ht44 tc font12 boxShadow font-white linear-gradients pos-f bottom10 right20 btn">
			点我
		</div>
	</body>

	<script>
		$(function(){
			initClickHidenEven();
			bgimgHt();
		})
		
		function bgimgHt(){
			var conHt=$('div.container-fluid')[0].scrollHeight;
			var bags = 'background-size:100% '+(conHt+60)+'px;';
			$("body").css("cssText",bags);
		}
		
		/*提交表单数据*/
		function submitForm(){
			var informCont=$("#informCont").val();
			if(informCont==''){
				$('.msgCont').text('信件内容不能为空').addClass('font-red');
				$('.msgCont').siblings().removeClass('display-n');
				return false;
			}else{
				console.log("ajax提交");
				jQuery.post($('#submitForm').attr('action'), $('#submitForm').serialize(),function(_json) {
					if (_json.status == "success") {
						$.alert("提交成功", function() {
							  //点击确认后的回调函数
						});
					} else {
						$.alert("提交失败", function() {
							  //点击确认后的回调函数
						});
					}
				});
				return false;
			}
		}
		
		function initClickHidenEven(){
			/*点击下一步效果*/
			$('div.next').bind('click',function(){
				var informName=$("#informName").val();
				var informSex=$("#informSex").val();
				var informNum=$("#informNum").val();
				var reg=/^1[34578]\d{9}$/;
				
				/*验证表单不能为空*/
				if(informName==''){
					$('#informName').val('姓名不能为空').addClass('font-red');
					$('#informName').siblings().removeClass('display-n');
				}else if(informSex==''){
					$('#informSex').val('性别不能为空').addClass('font-red');
					$('#informSex').siblings().removeClass('display-n');
				}else if(informNum==''){
					$('#informNum').val('手机号码不能为空').addClass('font-red');
					$('#informNum').siblings().removeClass('display-n');
				}else if(!reg.test(informNum)){
					$('#informNum').val('手机号码格式不正确').addClass('font-red');
					$('#informNum').siblings().removeClass('display-n');
				}else{
					$('div.base').hide();
					$('div.next').hide();
					$('div.suggest').removeClass('display-n');
					$('div.submit').removeClass('display-n');
					$('div.bottom14').hide();
				}
			});
			
			/*清空为空提示*/
			$('input').focus(function(){
				if($(this).hasClass('font-red')){
					$('input').removeClass('font-red');
					$(this).val('');
					$('img.right26').addClass('display-n');
				}
			});
			$('textarea').focus(function(){
				if($('.msgCont').hasClass('font-red')){
					$('.msgCont').removeClass('font-red');
					$('.msgCont').text('请在下面编辑您的信件内容');
					$('img.right26').addClass('display-n');
				}
			});	
			
			/*点击上一步效果*/
			$('div.upstep').bind('click',function(){
				$('div.base').show();
				$('div.next').show();
				$('div.suggest').addClass('display-n');
				$('div.submit').addClass('display-n');
				$('div.bottom14').show();
			});
			
			/*点击性别列表效果*/
			$('#typeList li .text-ellipsis1').bind('click',function(){
				var inputVal=$(this).find("span").attr("data");
				$(this).siblings().addClass('border-ed455e');
				$(this).addClass('font-ed455e');
				$(this).parent().parent().siblings().find('div.radius-circle').removeClass('border-ed455e').addClass('border');
				$(this).parent().parent().siblings().find('div.text-ellipsis1').removeClass('font-ed455e');
				$('#informSex').val($(this).find("span").text());
				$('#sexHidden').val();
				$('#sexHidden').val(inputVal);
			});
			
			$('textarea').focus(function(){
				$('.tipMsg').hide();
			});
		}
	</script>

</html>